<script setup lang="ts">
// import QueryResult from '@/composables/useUsers'
import { ElMessage } from 'element-plus'
import axios from 'axios'

let complainForm = ref([
  {
    complainid: 6,
    orderid: 4,
    complain: '服务不好',
    image: 'https://hiram.oss-cn-chengdu.aliyuncs.com/coffee.jpg',
    reply: '1',
    createtime: '2024-04-28 20:46:03',
    supplement: 1.0,
    state: 4
  }
])
let srcList = ref()
// 获取用户投诉（未审核）
const getAllComplain = () => {
  console.log('管理员获取所有投诉')
  axios({
    method: 'post',
    url: 'http://localhost:8080/complain/getstate',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('UserManagerToken')
    },
    params: {
      state: 0,
      restaurantid: '%'
    }
  }).then(
    (res) => {
      console.log('获取所有用户投诉', res.data.data)
      complainForm.value = res.data.data
    },
    (err) => {
      console.log(err)
      ElMessage.error('获取商家信息失败')
    }
  )
}
getAllComplain()

// 通过审核
function passInspection(id: any) {
  console.log(id)
  axios({
    method: 'post',
    url: 'http://localhost:8080/complain/statechange',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('UserManagerToken')
    },
    params: {
      complainid: id,
      state: 1
    }
  }).then(
    (res) => {
      console.log(res)
      console.log('管理员审核投诉通过', id)
      ElMessage.success('管理员审核投诉通过')
      getAllComplain()
    },
    (err) => {
      console.log(err)
      ElMessage.success('审核投诉失败,请刷新')
    }
  )
}
// 驳回审核
function rejectInspection(id: any) {
  console.log(id)
  axios({
    method: 'post',
    url: 'http://localhost:8080/complain/statechange',
    headers: {
      'Content-Type': 'application/octet-stream',
      Authorization: window.localStorage.getItem('UserManagerToken')
    },
    params: {
      complainid: id,
      state: 2
    }
  }).then(
    (res) => {
      console.log(res)
      ElMessage.success('管理员驳回审核成功')
      getAllComplain()
    },
    (err) => {
      console.log(err)
      ElMessage.success('驳回投诉失败,请刷新')
    }
  )
}
</script>

<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <span>用户投诉等待管理员审核</span>
      </div>
    </template>
    <el-table :data="complainForm" :border="false" style="width: 100%">
      <el-table-column type="expand">
        <template #default="props">
          <div style="margin-left: 88px">
            <p>投诉内容：{{ props.row.complain }}</p>
            <el-divider />
            <p>商家回复：{{ props.row.reply }}</p>
            <el-divider />
            <p>赔偿金额：{{ props.row.supplement }}</p>
            <el-divider />
            <el-descriptions title="投诉图片" :column="1" direction="horizontal">
              <el-descriptions-item>
                <div>
                  <el-image style="width: 180px; height: 180px" :src="props.row.image" />
                </div>
              </el-descriptions-item>
            </el-descriptions>
          </div>
        </template>
      </el-table-column>
      <el-table-column align="center" width="120" label="投诉ID" prop="complainid" />
      <el-table-column align="center" width="120" label="订单ID" prop="orderid" />
      <el-table-column align="center" width="200" label="发起时间" prop="createtime" />
      <el-table-column align="center" width="150" label="状态" prop="state">
        <template #default="{ row }">
          <el-tag size="small" type="warning" v-show="row.state == 0">管理员审核中...</el-tag>
          <el-tag size="small" type="info" v-show="row.state == 1">商家审核中...</el-tag>
          <el-tag size="small" type="danger" v-show="row.state == 2">管理员审核未通过</el-tag>
          <el-tag size="small" type="success" v-show="row.state == 3">商家审核已通过</el-tag>
          <el-tag size="small" type="danger" v-show="row.state == 4">商家审核未通过</el-tag>
        </template>
      </el-table-column>
      <el-table-column align="center" width="300" label="操作" prop="createtime">
        <template #default="{ row }">
          <el-button @click="passInspection(row.complainid)">通过审核,交付商家</el-button>
          <el-button @click="rejectInspection(row.complainid)">驳回投诉</el-button>
        </template> </el-table-column
      >>
    </el-table>
    <template #footer></template>
  </el-card>
</template>

<style lang="scss" scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 200px;
}

.box-card {
  width: auto;
}

// 资质图片
</style>
